<template>
	<!-- vue content -->
	<view class="ver common-body " style="background: #e7f7efee;position: relative">
		<view style="position: relative;">
			<image src="https://cdxf.5gsxt.cn/images/fo/1_bg@3x.jpg" mode="" class="match-width" style="height: 70vw;">
			</image>
			<view class="pd-lr25 match-width pd-t20  corner20 blur-effect2"
				style="position: absolute;top: 0;left:0;z-index: 99;margin-top: 59vw;max-height: calc(100vh - 59vw);overflow-y: auto;">
				<view class="match-width  corner20 inner">
					<view class="ver pd-lr25   corner-stroke-white-thin-10 hor-center "
						style="background-image: url('https://cdxf.5gsxt.cn/images/fo/home_img1@3x.jpg');background-size: cover;background-position: center;height: 250rpx;  border-radius: 25rpx;"
						@click="onClickiByType(1)">
						<view class="hor ver-center">
							<view class="uni-bold" style="font-size: 40rpx;">站内预约</view>
							<image src="../../static/img/ic_arrow_right_round.png" mode="" class="mg-l-20"
								style="height: 40rpx;width: 40rpx">
							</image>
						</view>
						<view class="font-text-color-main_body font16 mg-t-10" style="">队站开放及站内公益培训</view>
					</view>
					<view class="ver pd-lr25   corner-stroke-white-thin-10 mg-t-20 hor-center"
						style="background-image: url('https://cdxf.5gsxt.cn/images/fo/home_img2@3x.jpg');background-size: cover;background-position: center;height: 250rpx; border-radius: 25rpx;"
						@click="onClickiByType(2)">
						<view class="hor ver-center">
							<view class="uni-bold" style="font-size: 40rpx;">站外预约</view>
							<image src="../../static/img/ic_arrow_right_round.png" mode="" class="mg-l-20"
								style="height: 40rpx;width: 40rpx">
							</image>
						</view>
						<view class="font-text-color-main_body font16 " style="">上门服务 公益培训</view>
					</view>

					<view class="ver pd-lr25   corner-stroke-white-thin-10 mg-t-20 hor-center"
						style="background-image: url('https://cdxf.5gsxt.cn/images/fo/home_img3@3x.jpg');background-size: cover;background-position: center;height: 250rpx; border-radius: 25rpx;"
						@click="onClickiByType(3)">
						<view class="hor ver-center">
							<view class="uni-bold" style="font-size: 40rpx;">讲师团队</view>
							<image src="../../static/img/ic_arrow_right_round.png" mode="" class="mg-l-20"
								style="height: 40rpx;width: 40rpx">
							</image>
						</view>
						<view class="font-text-color-main_body font16 mg-t-10" style="">金牌讲师 精彩讲解</view>
					</view>

					<view class="ver pd-lr25   corner-stroke-white-thin-10 mg-t-20 hor-center"
						style="background-image: url('https://cdxf.5gsxt.cn/images/fo/home_img4@3x.jpg');background-size: cover;background-position: center;height: 250rpx; border-radius: 25rpx;"
						@click="onClickiByType(4)">
						<view class="hor ver-center">
							<view class="uni-bold" style="font-size: 40rpx;">精品课程</view>
							<image src="../../static/img/ic_arrow_right_round.png" mode="" class="mg-l-20"
								style="height: 40rpx;width: 40rpx">
							</image>
						</view>
						<view class="font-text-color-main_body font16 mg-t-10" style="">珍爱生命 关注消防</view>
					</view>
					<!-- <view class="ver pd-lr25 borWhite mg-t-20 hor-center"
						style=" background: linear-gradient(135deg, rgb(251,231,220) 0%, rgb(250,228,215) 25%,rgb(232,127,61) 100%);height: 250rpx; border-radius: 25rpx;"
						>
						<view class="hor ver-center">
							<view class="uni-bold" style="font-size: 40rpx;">一键反馈：成都消防救援支队</view>
						</view>
						<view class="font-text-color-main_body font16 mg-t-10" style="">反馈邮箱：2748623353@qq.com</view>
					</view> -->
					<view class="font-text-color-auxiliary font14 mg-t-10 hor-center text-center">
						主办单位：成都市消防救援支队<br/>
						<uni-link href="mailto:2748623353@qq.com" text="投诉邮箱：2748623353@qq.com" font-size="13"
							:showUnderLine="false" color="#cccccc"></uni-link>
					</view>
					<view class="" style="height: 20rpx;"></view>
				</view>
			</view>
			<!--  -->
		</view>
		<!-- <view style="position: fixed;top: 0;left:0;z-index: 99;width: 100vw;" class="bg-white ver ver-center hor-center"
			:style="{'height':totalHeight+'px','opacity':scrollProgress}">
			<view :style="{'height':statusBarHeight+'px'}" class="" style="opacity: 0;">1</view>
			<view class="text-center" :style="{'line-height':totalHeight+'px'}">消防预约</view>
		</view> -->
	</view>
</template>

<script>
	let _this
	export default {
		components: {},
		data() {
			return {
				contentHeight: 0,
				contentWidth: 0,
				emptyShow: false,
				emptyStatus: 1,
				emptyHint: "",
				authUser: null,
				auditStatus: 0,
				platform: 0,
				totalHeight: 0,
				statusBarHeight: 0,

				scrollProgress: 0

			}
		},
		onLoad(option) {
			_this = this;
			this.initUser(option, this, false);

			//获取屏幕高度及比例
			var winInfo = uni.getSystemInfo({
				success: function(res) {
					var windowHeight = res.windowHeight;
					var windowWidth = res.windowWidth;
					_this.contentHeight = windowHeight;
					_this.contentWidth = windowWidth
					_this.statusBarHeight = res.statusBarHeight

					_this.totalHeight = _this.statusBarHeight + uni.upx2px(70)

					// console.log("状态栏高度", res.statusBarHeight)
					// console.log("导航栏高度", res.navigationBarHeight)
					// console.log("标题栏高度", res.titleBarHeight)
					// console.log("可使用顶部位置", res.windowTop)
					// console.log("底部高度", res.windowTop)

					// _this.statusbarHeight = res.windowTop

				}
			});


		},
		onUnload() {
			console.log("卸载")
		},
		onShow() {
			this.initUser(null, this, false);
			this.onRefresh()
		},
		onPageScroll(res) {
			// console.log("页面滚动了")
			let data = res.scrollTop;

			let judgedHeight = _this.totalHeight * 2;
			if (data > judgedHeight) {
				_this.scrollProgress = 1;
			} else {
				let cha = judgedHeight - data;
				_this.scrollProgress = 1 - (cha / judgedHeight);
			}

			console.log(data)
			// console.log(_this.scrollProgress)
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.isLoading) {
				return
			}
			if (!this.canLoadMore) {
				return
			}
			this.page++;
			this.getData()
		},
		methods: {
			// onPullDownRefresh() {
			// 	// if (this.platform == 6) {
			// 	// 	uni.redirectTo({
			// 	// 		url: "taskList"
			// 	// 	})
			// 	// } else {
			// 	this.page = 1;
			// 	this.getData()
			// 	// }
			// },
			onRefresh() {
				this.page = 1;
			},

			onClickiByType(type) {
				if (type == 1) {
					uni.navigateTo({
						url: "/pages/lesson/lessonOrder"
					})
				} else if (type == 2) {
					uni.navigateTo({
						url: "/pages/lesson/lessonZWYY"
					})
				} else if (type == 3) {
					uni.navigateTo({
						url: "/pages/teacher/teacherList"
					})
				} else if (type == 4) {
					uni.navigateTo({
						url: "/pages/lesson/lessonList"
					})
				}
			}

		}
	}
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #e7f7efee;
	}

	.u-fixed-b {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		z-index: 50;
	}

	.body-bg {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(0deg, #e1cdf2, #edeaff, #c2edf5);
		/* 背景尺寸 - 原理3 */
		background-size: 100% 100%;
	}


	.gradient1 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-45deg, #eeb354, #e742c4, #2cd589, #3970d5);
		/* 背景尺寸 - 原理3 */
		background-size: 600% 600%;
		/* 循环动画 - 原理4 */
		animation: gradientBG 4s ease infinite;
	}

	.gradient2 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		/* 背景尺寸 - 原理3 */
		background-size: 600% 600%;
		/* 循环动画 - 原理4 */
		animation: gradientBG 4s ease infinite;
	}

	/* 动画，控制背景 background-position */
	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.gap {
		height: 1px;
		background-color: #f1f1f1;
	}

	.black-gradient-ver {
		background-image: linear-gradient(transparent, #ffffff);
	}

	.bg-gradient-blue1 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #2b35ff, #8f95ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.bg-gradient-blue2 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #6e25ff, #9361ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.bg-gradient-blue3 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #238dff, #50a5ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.blur-effect {
		/* 设置背景模糊 */
		backdrop-filter: blur(40rpx);
		filter: blur(2rpx);
		/* other styles */
		background: rgba(231, 247, 239, 0.5);
		border: 1rpx solid white;
	}


	/* 新增 */
	.inner {
		position: relative;
		/* 创建相对定位上下文 */
		z-index: 1;
		/* 在这个上下文中，z-index不会改变层叠顺序，但有助于理解 */
	}

	.inner::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* background-color: rgba(231, 247, 239,1); */
		opacity: 1;
		/* 完全不透明 */
		z-index: -1;
		/* 放在.inner内容之下 */
		pointer-events: none;
		/* 确保伪元素不会干扰鼠标事件 */
	}

	.blur-effect2 {
		-webkit-backdrop-filter: blur(40rpx);
		backdrop-filter: blur(40rpx);
		/* -webkit-filter: blur(1px); */
		/* filter: blur(1px); */
		background: rgba(231, 247, 239, 0.5);
		border: 1rpx solid white;
	}

	.borWhite {
		border: 2rpx solid white;
	}
</style>